<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--专病数据-->
      <el-form class="formBox formBox1" :model="queryParams" ref="queryForm" size="small" :inline="true"
        v-show="showSearch" label-width="100px">
        <el-form-item label="状态" prop="sMark" clearable>
          <el-select v-model="queryParams.sMark" placeholder="状态" clearable filterable style="width: 160px">
            <el-option v-for="dict in sysUseTypeArr" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="顾客编号" prop="visitNum">
          <el-input v-model="queryParams.visitNum" placeholder="请输入顾客编号" clearable style="width: 160px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="设备" prop="type">
          <el-select v-model="queryParams.type" filterable placeholder="请选择设备" clearable style="width: 160px">
            <el-option v-for="dict in dict.type.photo_upload_type" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="照片部位" prop="facePart">
          <el-select v-model="queryParams.facePart" filterable placeholder="请选择照片部位" clearable style="width: 160px">
            <el-option v-for="dict in dict.type.sys_face_part" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="光照类型" prop="faceLight">
          <el-select v-model="queryParams.faceLight" placeholder="采集设备" clearable filterable style="width: 160px">
            <el-option v-for="dict in dict.type.photo_lighting_type" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采集状态" prop="status">
          <el-select v-model="queryParams.status" filterable placeholder="请选择状态" clearable style="width: 160px">
            <el-option v-for="dict in dict.type.sys_diagnosis_status" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="诊断" prop="diseaseId">
          <el-select
            v-model="queryParams.diseaseId"
            placeholder="专病名称"
            clearable
            filterable
            style="width: 160px"
          >
            <el-option
              v-for="dict in sysManageDiseases"
              :key="dict.diseaseClassifyId"
              :label="dict.diseaseClassifyName"
              :value="dict.diseaseClassifyId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="标注人">
          <el-select
            v-model="queryParams.visitUserName"
            placeholder="请选择标注人"
            clearable
            filterable
            style="width: 160px"
          >
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核人">
          <el-select
            v-model="queryParams.visitUserName"
            placeholder="请选择审核人"
            clearable
            filterable
            style="width: 160px"
          >
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userName"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <!-- <el-button icon="el-icon-printer" size="mini" @click="resetQuery">打印</el-button> -->
        </el-form-item>
        <el-form-item>共有照片:<span style="color: red; margin-right: 20px">{{
          libraryPhotoKindData.all
        }}</span>
          已标照片:<span style="color: red; margin-right: 20px">{{
            libraryPhotoKindData.isMark
          }}</span>
          未标照片:<span style="color: red">{{
            libraryPhotoKindData.noMark
          }}</span></el-form-item>
      </el-form>
      <div class="formBox">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-delete" size="mini" @click="handleDel">批量删除</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getAnnotateList"></right-toolbar>
        </el-row>
        <el-table :border="true" style="width: 100%" stripe v-loading="loading" :data="annotateList"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="序号" align="center" type="index" width="50">
            <template slot-scope="scope">
              <span>{{ getIndex(scope.$index) }}</span>
            </template>
          </el-table-column>
          <el-table-column sortable label="顾客编号" align="center" prop="visitNum" width="160">
          </el-table-column>
          <el-table-column label="照片" align="center" prop="photoNum" width="100">
            <template slot-scope="scope">
              <div class="user-info-head" >
                <lazyImg class="img-style" fit="contain" :src="scope.row.thumbnail" v-if="!loading">
                  <div class="slotlazyImg-txt">图片加载中...</div>
                  <template #err>
                    <div class="slotlazyImg-txt">图片加载失败</div>
                  </template>
                </lazyImg>
              </div>
              <!-- <img :src="scope.row.thumbnail" alt="" /> -->
              <!-- <el-tooltip placement="right" effect="light">
                <div slot="content" class="tooltipSlotBox">
                  <div
                    class="img-txt"
                    v-for="(item, Mindex) in scope.row.rtList"
                    :key="Mindex"
                  >
                    <div class="user-info-head">
                      <el-image
                        class="img-style"
                        fit="contain"
                        :src="item.thumbnail"
                        @click="watchBigPic(scope.row, Mindex)"
                      ></el-image>
                    </div>
                  </div>
                </div>
                <div>
                  <el-tag type="1">{{ scope.row.photoNum }}</el-tag>
                </div>
              </el-tooltip> -->
            </template>
          </el-table-column>
          <el-table-column sortable label="标注状态" align="center" prop="annotateStateValue" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.sMark == '0'" type="danger">
                {{ scope.row.annotateStateValue }}
              </el-tag>
              <el-tag v-else type="success">
                {{ scope.row.annotateStateValue }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column sortable label="拍照设备" align="center" prop="type">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.photo_upload_type" :value="scope.row.type" />
            </template>
          </el-table-column>
          <el-table-column sortable label="光照类型" align="center" prop="faceLight">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.photo_lighting_type" :value="scope.row.faceLight" />
            </template>
          </el-table-column>
          <el-table-column sortable label="部位" align="center" prop="facePart">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_face_part" :value="scope.row.facePart" />
            </template>
          </el-table-column>
          <el-table-column sortable label="采集时刻" align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_diagnosis_status" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column sortable label="上传人" align="center" prop="nickName" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column sortable label="上传时间" align="center" prop="createTime" :show-overflow-tooltip="true">
          </el-table-column>

          <el-table-column label="操作" align="center" fixed="right" width="260" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="watchBigPic(scope.row)">标注</el-button>
              <el-button v-if="scope.row.sMark == '0'" size="mini" type="text" icon="el-icon-delete"
                @click="handleDelete(scope.row)">剔除</el-button>
              <el-button v-if="isAdmin" size="mini" type="text" icon="el-icon-delete"
                @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page-sizes="[10, 20, 30, 50, 100, 500]"
          :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getAnnotateList" />
      </div>
    </el-row>

    <el-dialog title="照片标注" :visible.sync="picMarkDialogVisible" width="100%" center :close-on-click-modal="false"
      :append-to-body="true" v-dialogDrag class="nopaddingBody fullDialog" :before-close="updateParentsDialogData">
      <PhotoMark :currentUrl="currentUrl" :imgList="imgList" :myImgIndex="myImgIndex" :libraryId="libraryId"
        :libraryquery="queryParams" @closedEvent="picMarkDialogVisible = false" v-if="picMarkDialogVisible">
      </PhotoMark>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  listLibraryPhoto,
  deleteLibraryPhotos,
  libraryPhotoKindData,
} from "@/api/system/annotationLibrary";

import { listDept, deptNameList } from "@/api/system/dept";
import { listUser } from "@/api/system/user";
import { listAnnotate, delAnnotate } from "@/api/system/annotate";
import { listClassify } from "@/api/system/classify";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import PhotoMark from "@/views/components/photoMark/photoMark.vue";
import department from "@/views/components/department/index.vue";
import departTag from "@/views/components/department/departTag.vue";
import PhotosLibrary from "../components/photosLibrary.vue";
export default {
  name: "annotateManage",
  dicts: [
    "sys_manage_diseases",
    "photo_upload_type",
    "photo_lighting_type",
    "sys_face_part",
    "sys_diagnosis_status",
  ],
  props: ["libraryId"],
  components: {
    Treeselect,
    PhotoMark,
    department,
    departTag,
    PhotosLibrary,
  },
  data() {
    return {
      printDialogVisible: false,
      sysUseTypeArr: [
        { label: "未标注", value: "0" },
        { label: "已标注", value: "1" },
      ],
      editor: null,
      // 遮罩层
      loading: true,
      printInfo: {},
      // 选中数组
      ids: [],
      diseaseClassifyName: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 标注表格数据
      annotateList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 是否修改
      inputDisabled: false,
      // 表单参数
      // form: {},
      form: {
        title: "", //文本标题
        colorValue: "", //颜色值
        diseaseIds: "", //专病类型 （字典管理）
        label: "",
      },
      detectionType: [], //可选的 检测指标  （接口返回）仅前端用
      sysManageDiseases: [], //专病管理

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: undefined,
        visitNum: undefined,
        facePart: undefined,
        faceLight: undefined,
        status: undefined,
        sMark: undefined,
        researchLibrariesId: this.libraryId,
      },
      // 表单校验
      rules: {
        title: [
          {
            required: true,
            message: "标注设置名称不能为空",
            trigger: "blur",
          },
        ],
        diseaseIds: [
          {
            required: true,
            message: "专病必选",
            trigger: "blur",
          },
        ],
        label: [
          {
            required: true,
            message: "特征名称不能为空！",
            trigger: "blur",
          },
        ],
        colorValue: [
          {
            required: true,
            message: "颜色值不能为空！",
            trigger: "blur",
          },
        ],
      },
      userList: [],
      classifyList: [],
      patientItem: {},
      picMarkDialogVisible: false,
      currentUrl: "",
      imgList: [],
      myImgIndex: "", //picData 第几组的index下 第几个照片的index
      photoIds: null,
      libraryPhotoKindData: { all: 0, isMark: 0, noMark: 0 },
    };
  },
  watch: {},
  created() {
    this.getclassList();
    this.getuserList();
  },
  mounted() {
    this.getAnnotateList();
  },
  computed: {
    ...mapGetters(["dept", "hospital", "device"]),
    isAdmin() {
      return this.$store.state.user.name === "admin" ? true : false;
    },
  },
  methods: {
    getLibraryPhotoKindData() {
      libraryPhotoKindData({ researchLibrariesId: this.libraryId }).then(
        (res) => {
          if (res.code === 200) {
            this.libraryPhotoKindData = res.data;
          }
        }
      );
    },
    updateParentsDialogData() {
      this.getAnnotateList();
      this.picMarkDialogVisible = false;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.photoIds = selection.map((item) => item.photoId).join(",");
    },
    watchBigPic(row) {
      this.myImgIndex = 0;
      this.currentUrl = row.photoAddress;
      this.imgList = [row];
      this.picMarkDialogVisible = true;
    },
    /** 查询咨询医生 */
    getuserList() {
      listUser({ pageNum: 1, pageSize: 9999, roleId: "" }).then((res) => {
        this.userList = res.rows;
      });
    },
    changeColorValue(e) {
      console.log(e);
    },

    // 获取专病列表
    getclassList() {
      this.loading = true;
      let params = {
        pageNum: 1,
        pageSize: 9999,
        status: "0",
      };
      listClassify(params).then((response) => {
        this.loading = false;
        this.sysManageDiseases = response.rows;
      });
    },

    // 真实序号计算（计算分页影响）
    getIndex(index) {
      return (
        (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
      );
    },
    /** 查询标注列表 */
    getAnnotateList() {
      this.loading = true;
      listLibraryPhoto(this.queryParams).then((res) => {
        console.log("窜下列表list")
        console.log(res);
        this.annotateList = []
        this.annotateList = res.rows.map((item) => {
          return {
            ...item,
            annotateStateValue: this.sysUseTypeArr.find(
              (it) => it.value == item.sMark
            )?.label,
          };
        });
        this.total = res.total;
        this.$forceUpdate();
        this.loading = false;
        this.getLibraryPhotoKindData();
      });
    },

    // 表单重置
    reset() {
      this.form = {
        title: "", //文本标题
        type: "", //文本类别 （字典管理）
        diseaseIds: "", //专病类型 （字典管理）
        status: "0", //使用状态 //0在用
        content: "", //文本内容
        publisher: "", //创建人
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getAnnotateList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 批量删除按钮操作 */
    handleDel() {
      this.$confirm("此操作将删除所选照片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteLibraryPhotos(this.libraryId, this.photoIds).then(
            (response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess("删除成功");
                this.getAnnotateList();
              }
            }
          );
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.inputDisabled = true;
      const textId = row.textId;
      getText(textId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "编辑照片";
      });
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log(this.form);
          if (this.form.textId != undefined) {
            updateText(this.form).then((response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getAnnotateList();
              }
            });
          } else {
            addText(this.form).then((response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getAnnotateList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm("此操作将删除所选照片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteLibraryPhotos(this.libraryId, row.photoId).then((response) => {
            if (response.code == 200) {
              this.$modal.msgSuccess("删除成功");
              this.getAnnotateList();
            }
          });
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style scoped lang="scss">
.el-tag {
  margin-right: 15px;
}

.user-info-head {
  width: 80px;
  height: 60px;

  //border: 1px solid #000;
  .img-style {
    width: 100%;
    height: 100%;

    ::v-deep .el-image__error {
      opacity: 0;
    }
  }
}

::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 0 !important;
}
</style>
